<template>
  <div
    class="tableWindow">
    <div class="search">
      <!-- 关键字搜索 -->
      <a-input
        class="input"
        placeholder="请输入搜索关键字"
      />
      <a-button
        type="primary"
        style="margin-left: 10px; height: 32px"
        size="small"
      >企业查询</a-button>
    </div>

    <div class="content">
      <ul>
        <li class="titlePark"><span>园区列表</span><span>20</span></li>
      </ul>
      <div>
        <a-tree
          v-model="checkedKeys"
          checkable
          @check="onCheck"
          :selected-keys="selectedKeys"
          :tree-data="treeData"
          @select="onSelect"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'

  const treeData = [
    {
      title: '0-0',
      key: '0-0'
    },
    {
      title: '0-1',
      key: '0-1'
    },
    {
      title: '0-2',
      key: '0-2'
    },
    {
      title: '0-3',
      key: '0-3'
    },
    {
      title: '0-4',
      key: '0-4'
    },
    {
      title: '0-5',
      key: '0-5'
    }
  ];
    export default {
      name: 'TableWindow',
      props: ['parkShow'],
      data() {
          return {
            // 是否可移动
            move: true,
            closeStatus: true,
            autoExpandParent: true,
            treeData
          }
      },
      watch: {
        checkedKeys(val) {
          console.log('onCheck', val);
        }
      },
      computed: {
        ...mapState('dp', {
          selectedKeys: state => state.selectedKeys
        }),
        checkedKeys: {
          get() {
            return this.$store.state.dp.checkedKeys;
          },
          set(v) {
            this.SET_CHECKED_KEYS(v)
          }
        }
      },
      methods: {
        ...mapMutations('dp', ['SET_CHECKED_KEYS', 'SET_SELECTED_KEYS']),
        // 关闭图层
        closeLayer() {
          this.setLayerKey('')
          this.$emit('closeLayer')
        },
        onExpand(expandedKeys) {
          console.log('onExpand', expandedKeys);
          // if not set autoExpandParent to false, if children expanded, parent can not collapse.
          // or, you can remove all expanded children keys.
          this.expandedKeys = expandedKeys;
          this.autoExpandParent = false;
        },
        onCheck(checkedKeys) {
          console.log('onCheck11', checkedKeys);
        },
        onSelect(selectedKeys, info) {
          console.log('onSelect', info);
          // this.selectedKeys = selectedKeys;
          this.SET_SELECTED_KEYS(selectedKeys)
          this.$emit('update:parkShow', !this.parkShow)
        }
      }
    }
</script>

<style scoped lang="less">
.tableWindow{
  width: 300px;
  height:600px;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  background: rgba(19, 28, 50, 0.8);
  border: 1px solid rgba(2, 224, 247, 0.5);

  color: #fff;
  top:50px;
  left: 25px;
  z-index:2;
  .search {
    width: 200px;
    height: auto;
    margin: 12px auto 0;
    display: flex;
    justify-content: flex-end;

      ::v-deep .ant-input {
        padding-right: 0;
        box-sizing: border-box;
        background: transparent;
        color: #fff;
        width: 150px;
        border-radius: 0;
        border: 1px solid rgba(2, 224, 247, 0.5);
        ::placeholder {
          color: rgba(255, 255, 255, 0.3);
        }
        ::-moz-placeholder {
          color: rgba(255, 255, 255, 0.3);
        }
      }
      ::v-deep .anticon {
        color: rgba(255, 255, 255, 0.3);
    }
  }
  ::v-deep ul {
    width: 100%;
    height: auto;
    .titlePark{
      margin-top:11px;
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;
      span:first-child{
        margin-right: 89px;
      }
    }
    ::v-deep li {
      width: 100%;
      height: auto;
      .li-c {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(255, 255, 255, 1);
        height: 30px;
        padding: 0 0 0 10px;
        cursor: pointer;
        position: relative;
        .li-lt {
          flex: 1;
          display: flex;
          align-items: center;
          width: auto;
          overflow: hidden;
          margin-left: 24px;
          .select {
            width: 16px;
            height: 16px;
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 2px;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            flex-shrink: 0;
          }
          // .select:hover {
          //   border-color: #1890ff;
          // }
          .select::after {
            position: absolute;
            top: 50%;
            left: 22%;
            display: table;
            width: 5.71428571px;
            height: 9.14285714px;
            border: 2px solid #fff;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg) scale(0) translate(-50%, -50%);
            opacity: 0;
            transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
            content: '';
          }
          .tree-checkbox-indeterminate::after {
            top: 50%;
            left: 50%;
            width: 8px;
            height: 2px;
            background-color: #fff;
            border: 0;
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            content: ' ';
          }
          .tree-checkbox-checked,
          .tree-checkbox-indeterminate {
            background-color: #1890ff;
            border-color: #1890ff;
          }
          .tree-checkbox-checked::after {
            position: absolute;
            display: table;
            border: 2px solid #fff;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg) scale(1) translate(-50%, -50%);
            opacity: 1;
            transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
          }
        }
      }
      .name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 400;
        margin-left: 6px;
        width: calc(100% - 22px);
        em {
          font-family: PingFangSC-Regular, PingFang SC;
          white-space: nowrap;
          overflow: hidden;
          flex-shrink: 1;
          text-overflow: ellipsis;
        }
        img {
          flex-shrink: 0;
          width: 16px;
          height: 16px;
          display: block;
          margin-right: 6px;
        }
        .on-line {
          flex-shrink: 0;
          color: #6dd400;
          display: flex;
          align-items: center;
          margin-right: 5px;
          .tracking {
            width: 16px;
            height: 16px;
            cursor: pointer;
          }
        }
      }
      .num {
        display: flex;
        margin-left: 4px;
        .icon {
          margin-left: 5px;
          cursor: pointer;
          padding: 4px;
          transform: rotate(0deg);
          transition: transform 0.2s;
        }
        .down {
          transform: rotate(180deg);
        }
      }
      .bg {
        background: rgba(25, 144, 253, 0.65);
      }
      .li-c:hover {
        background: linear-gradient(90deg, #131c32 0%, rgba(19, 28, 50, 0) 100%);
      }
      .bg:hover {
        background: rgba(25, 144, 253, 0.65);
      }
      ul li .li-c {
        padding: 0 0 0 24px;
      }
      ul li ul li .li-c {
        padding: 0 0 0 38px;
      }
      ul li ul li ul li .li-c {
        padding: 0 0 0 52px;
      }
      ul li ul li ul li ul li .li-c {
        padding: 0 0 0 66px;
      }
      ul li ul li ul li ul li ul li .li-c {
        padding: 0 0 0 80px;
      }
    }
  }
  ::v-deep .ant-tree li .ant-tree-node-content-wrapper .ant-tree-title{
    color: white;
    font-size:15px;
  }
  ::v-deep .ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop{
    width: 33px;
  }
}
</style>
